<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古韵新境 - 让古典文学活起来</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        ink: '#333333',
                        cinnabar: '#c41e3a',
                        rice: '#f5f2ea',
                        lightink: '#666666',
                        paper: '#f9f6f0',
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif'],
                        sans: ['"Noto Sans SC"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .hero-overlay {
                background: linear-gradient(to right, rgba(51, 51, 51, 0.8), rgba(51, 51, 51, 0.4));
            }
            .feature-card-hover {
                transition: all 0.4s ease;
            }
            .feature-card-hover:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');
        
        /* 滚动动画 */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .scroll-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 导航栏滚动效果 */
        .nav-scrolled {
            background-color: rgba(245, 242, 234, 0.95);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>

<body class="bg-rice text-ink font-sans">
    <!-- 导航栏 -->
    <header id="main-nav" class="fixed top-0 left-0 w-full z-50 transition-all duration-500 py-4">
        <div class="container mx-auto px-4 md:px-8 flex justify-between items-center">
            <!-- Logo -->
            <a href="index.html" class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                    <span class="text-rice font-kai text-xl">古</span>
                </div>
                <span class="text-xl md:text-2xl font-song font-bold">古韵新境</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="font-song text-cinnabar border-b-2 border-cinnabar pb-1">首页</a>
                <a href="poems.html" class="font-song hover:text-cinnabar transition-colors duration-300">诗境</a>
                <a href="classics.html" class="font-song hover:text-cinnabar transition-colors duration-300">典籍</a>
                <a href="interactive.html" class="font-song hover:text-cinnabar transition-colors duration-300">互动</a>
                <a href="about.html" class="font-song hover:text-cinnabar transition-colors duration-300">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-2 rounded-full hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105">
                    登录 / 注册
                </button>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-ink text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-paper absolute top-full left-0 w-full shadow-lg">
            <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                <a href="index.html" class="font-song py-2 border-b border-gray-200 text-cinnabar">首页</a>
                <a href="poems.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">诗境</a>
                <a href="classics.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">典籍</a>
                <a href="interactive.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">互动</a>
                <a href="about.html" class="font-song py-2 hover:text-cinnabar">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300">
                    登录 / 注册
                </button>
            </div>
        </div>
    </header>

    <main>
        <!-- 英雄区域 -->
        <section class="relative h-[80vh] min-h-[600px] overflow-hidden">
            <div class="absolute inset-0 z-0">
                <img src="https://picsum.photos/id/1036/1920/1080" alt="古典意境" class="w-full h-full object-cover">
                <div class="absolute inset-0 hero-overlay"></div>
            </div>
            
            <div class="container mx-auto px-4 h-full flex items-center relative z-10">
                <div class="max-w-2xl scroll-reveal">
                    <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-song font-bold text-rice leading-tight mb-6">
                        举头望明月<br>低头思故乡
                    </h1>
                    <p class="text-[clamp(1rem,2vw,1.25rem)] text-rice/90 mb-8 max-w-xl">
                        穿越千年的文字，在现代语境中重获新生。探索古典诗词的意境之美，感受传统文化的当代魅力。
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="poems.html" class="bg-cinnabar text-rice px-8 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300 font-medium">
                            探索诗境
                        </a>
                        <a href="interactive.html" class="bg-transparent border-2 border-rice text-rice px-8 py-3 rounded-full hover:bg-rice/10 transition-all duration-300 font-medium">
                            互动体验
                        </a>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 特色分类 -->
        <section class="container mx-auto px-4 py-16">
            <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-song font-bold mb-2 text-center scroll-reveal">诗词分类</h2>
            <p class="text-lightink text-center max-w-2xl mx-auto mb-12 scroll-reveal">从不同主题感受古典诗词的多样魅力，找到触动你心灵的那一句</p>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 md:gap-6">
                <a href="poems.html?theme=山水" class="bg-paper rounded-xl p-6 text-center feature-card-hover scroll-reveal">
                    <div class="w-14 h-14 mx-auto mb-4 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-tree text-cinnabar text-xl"></i>
                    </div>
                    <h3 class="font-song font-medium">山水</h3>
                </a>
                
                <a href="poems.html?theme=边塞" class="bg-paper rounded-xl p-6 text-center feature-card-hover scroll-reveal">
                    <div class="w-14 h-14 mx-auto mb-4 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-flag text-cinnabar text-xl"></i>
                    </div>
                    <h3 class="font-song font-medium">边塞</h3>
                </a>
                
                <a href="poems.html?theme=思乡" class="bg-paper rounded-xl p-6 text-center feature-card-hover scroll-reveal">
                    <div class="w-14 h-14 mx-auto mb-4 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-home text-cinnabar text-xl"></i>
                    </div>
                    <h3 class="font-song font-medium">思乡</h3>
                </a>
                
                <a href="poems.html?theme=爱情" class="bg-paper rounded-xl p-6 text-center feature-card-hover scroll-reveal">
                    <div class="w-14 h-14 mx-auto mb-4 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-heart text-cinnabar text-xl"></i>
                    </div>
                    <h3 class="font-song font-medium">爱情</h3>
                </a>
                
                <a href="poems.html?theme=咏史" class="bg-paper rounded-xl p-6 text-center feature-card-hover scroll-reveal">
                    <div class="w-14 h-14 mx-auto mb-4 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-book text-cinnabar text-xl"></i>
                    </div>
                    <h3 class="font-song font-medium">咏史</h3>
                </a>
                
                <a href="poems.html?theme=田园" class="bg-paper rounded-xl p-6 text-center feature-card-hover scroll-reveal">
                    <div class="w-14 h-14 mx-auto mb-4 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-leaf text-cinnabar text-xl"></i>
                    </div>
                    <h3 class="font-song font-medium">田园</h3>
                </a>
            </div>
        </section>
        
        <!-- 精选诗词 -->
        <section class="bg-paper py-16">
            <div class="container mx-auto px-4">
                <div class="flex justify-between items-end mb-12">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-song font-bold mb-2 scroll-reveal">精选诗词</h2>
                        <p class="text-lightink max-w-2xl scroll-reveal">每日精选，与你共赏经典</p>
                    </div>
                    <a href="poems.html" class="hidden md:block text-cinnabar hover:text-cinnabar/80 transition-colors scroll-reveal">
                        查看全部 <i class="fa fa-angle-right ml-1"></i>
                    </a>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 诗词1 -->
                    <a href="poem-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal">
                        <div class="relative h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/29/600/400" alt="静夜思场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                            <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">五言绝句</div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-song font-bold mb-2">静夜思</h3>
                            <p class="text-sm text-lightink mb-3">李白 · 唐代</p>
                            <p class="font-kai text-ink/80 mb-4">床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </a>
                    
                    <!-- 诗词2 -->
                    <a href="poem-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal">
                        <div class="relative h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/110/600/400" alt="望庐山瀑布场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                            <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">七言绝句</div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-song font-bold mb-2">望庐山瀑布</h3>
                            <p class="text-sm text-lightink mb-3">李白 · 唐代</p>
                            <p class="font-kai text-ink/80 mb-4">日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。</p>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </a>
                    
                    <!-- 诗词3 -->
                    <a href="poem-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm poem-card-hover scroll-reveal">
                        <div class="relative h-48 overflow-hidden">
                            <img src="https://picsum.photos/id/135/600/400" alt="将进酒场景图" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                            <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">乐府诗</div>
                        </div>
                        <div class="p-6">
                            <h3 class="text-xl font-song font-bold mb-2">将进酒</h3>
                            <p class="text-sm text-lightink mb-3">李白 · 唐代</p>
                            <p class="font-kai text-ink/80 mb-4">君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors">
                                查看详情 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </a>
                </div>
                
                <div class="text-center mt-10 md:hidden scroll-reveal">
                    <a href="poems.html" class="inline-block text-cinnabar hover:text-cinnabar/80 transition-colors">
                        查看全部诗词 <i class="fa fa-angle-right ml-1"></i>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- 互动体验 -->
        <section class="container mx-auto px-4 py-16">
            <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-song font-bold mb-2 text-center scroll-reveal">互动体验</h2>
            <p class="text-lightink text-center max-w-2xl mx-auto mb-12 scroll-reveal">不止于读，更能创作与体验，让古典文学焕发新活力</p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <a href="soundscape.html" class="bg-paper rounded-xl p-6 feature-card-hover scroll-reveal">
                    <div class="w-16 h-16 mb-5 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-volume-up text-cinnabar text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-song font-bold mb-2">声景体验</h3>
                    <p class="text-lightink text-sm">聆听诗词意境，感受声音中的古典世界</p>
                </a>
                
                <a href="painting.html" class="bg-paper rounded-xl p-6 feature-card-hover scroll-reveal">
                    <div class="w-16 h-16 mb-5 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-paint-brush text-cinnabar text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-song font-bold mb-2">诗画创作</h3>
                    <p class="text-lightink text-sm">为喜爱的诗词创作插画，用画笔诠释意境</p>
                </a>
                
                <a href="dialogue.html" class="bg-paper rounded-xl p-6 feature-card-hover scroll-reveal">
                    <div class="w-16 h-16 mb-5 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-comments text-cinnabar text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-song font-bold mb-2">古今对话</h3>
                    <p class="text-lightink text-sm">与古代诗人"对话"，探寻创作背后的故事</p>
                </a>
                
                <a href="interactive.html" class="bg-paper rounded-xl p-6 feature-card-hover scroll-reveal">
                    <div class="w-16 h-16 mb-5 rounded-full bg-cinnabar/10 flex items-center justify-center">
                        <i class="fa fa-pencil text-cinnabar text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-song font-bold mb-2">续写诗句</h3>
                    <p class="text-lightink text-sm">延续经典，尝试为诗词创作新的篇章</p>
                </a>
            </div>
        </section>
        
        <!-- 诗人推荐 -->
        <section class="bg-ink text-rice py-16">
            <div class="container mx-auto px-4">
                <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-song font-bold mb-2 text-center scroll-reveal">千古诗人</h2>
                <p class="text-rice/70 text-center max-w-2xl mx-auto mb-12 scroll-reveal">走进诗人的世界，了解他们的人生与创作</p>
                
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
                    <!-- 诗人1 -->
                    <a href="poet-detail.html" class="text-center group scroll-reveal">
                        <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                            <img src="https://picsum.photos/id/64/200/200" alt="李白头像" class="w-full h-full object-cover">
                        </div>
                        <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">李白</h3>
                        <p class="text-xs text-rice/70">唐代</p>
                    </a>
                    
                    <!-- 诗人2 -->
                    <a href="poet-detail.html" class="text-center group scroll-reveal">
                        <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                            <img src="https://picsum.photos/id/91/200/200" alt="杜甫头像" class="w-full h-full object-cover">
                        </div>
                        <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">杜甫</h3>
                        <p class="text-xs text-rice/70">唐代</p>
                    </a>
                    
                    <!-- 诗人3 -->
                    <a href="poet-detail.html" class="text-center group scroll-reveal">
                        <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                            <img src="https://picsum.photos/id/22/200/200" alt="白居易头像" class="w-full h-full object-cover">
                        </div>
                        <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">白居易</h3>
                        <p class="text-xs text-rice/70">唐代</p>
                    </a>
                    
                    <!-- 诗人4 -->
                    <a href="poet-detail.html" class="text-center group scroll-reveal">
                        <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                            <img src="https://picsum.photos/id/26/200/200" alt="苏轼头像" class="w-full h-full object-cover">
                        </div>
                        <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">苏轼</h3>
                        <p class="text-xs text-rice/70">宋代</p>
                    </a>
                    
                    <!-- 诗人5 -->
                    <a href="poet-detail.html" class="text-center group scroll-reveal">
                        <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                            <img src="https://picsum.photos/id/65/200/200" alt="李清照头像" class="w-full h-full object-cover">
                        </div>
                        <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">李清照</h3>
                        <p class="text-xs text-rice/70">宋代</p>
                    </a>
                    
                    <!-- 诗人6 -->
                    <a href="poet-detail.html" class="text-center group scroll-reveal">
                        <div class="relative w-24 h-24 mx-auto mb-3 rounded-full overflow-hidden border-2 border-transparent group-hover:border-cinnabar transition-all duration-300">
                            <img src="https://picsum.photos/id/76/200/200" alt="王维头像" class="w-full h-full object-cover">
                        </div>
                        <h3 class="font-song font-medium group-hover:text-cinnabar transition-colors">王维</h3>
                        <p class="text-xs text-rice/70">唐代</p>
                    </a>
                </div>
                
                <div class="text-center mt-10">
                    <a href="poets.html" class="inline-block border-2 border-rice text-rice px-8 py-3 rounded-full hover:bg-rice hover:text-ink transition-all duration-300 font-song">
                        查看更多诗人
                    </a>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-ink text-rice py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                            <span class="text-rice font-kai text-xl">古</span>
                        </div>
                        <span class="text-xl font-song font-bold">古韵新境</span>
                    </div>
                    <p class="text-rice/70 mb-6">让古典文学活起来，用现代方式感受传统文化魅力</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-rice/70 hover:text-cinnabar transition-colors">首页</a></li>
                        <li><a href="poems.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗境</a></li>
                        <li><a href="classics.html" class="text-rice/70 hover:text-cinnabar transition-colors">典籍</a></li>
                        <li><a href="interactive.html" class="text-rice/70 hover:text-cinnabar transition-colors">互动体验</a></li>
                        <li><a href="about.html" class="text-rice/70 hover:text-cinnabar transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">互动功能</h4>
                    <ul class="space-y-3">
                        <li><a href="soundscape.html" class="text-rice/70 hover:text-cinnabar transition-colors">声景体验</a></li>
                        <li><a href="painting.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗画创作</a></li>
                        <li><a href="dialogue.html" class="text-rice/70 hover:text-cinnabar transition-colors">古今对话</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">用户作品</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">创作活动</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-envelope-o mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">contact@guyunxinjing.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">+86 123 4567 8910</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">北京市海淀区中关村南大街5号</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-rice/20 pt-8 text-center text-rice/50 text-sm">
                <p>© 2023 古韵新境 - 古典文学革新平台 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-cinnabar text-rice w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 z-50">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        $(window).scroll(function() {
            const nav = $('#main-nav');
            if ($(window).scrollTop() > 50) {
                nav.addClass('nav-scrolled');
            } else {
                nav.removeClass('nav-scrolled');
            }
            
            // 回到顶部按钮显示/隐藏
            const backToTop = $('#back-to-top');
            if ($(window).scrollTop() > 300) {
                backToTop.removeClass('opacity-0 invisible').addClass('opacity-100 visible');
            } else {
                backToTop.removeClass('opacity-100 visible').addClass('opacity-0 invisible');
            }
            
            // 滚动显示动画
            $('.scroll-reveal').each(function() {
                const revealTop = $(this).offset().top;
                const windowHeight = $(window).height();
                const scrollTop = $(window).scrollTop();
                
                if (revealTop < scrollTop + windowHeight - 100) {
                    $(this).addClass('active');
                }
            });
        });
        
        // 移动端菜单切换
        $('#menu-toggle').click(function() {
            $('#mobile-menu').toggleClass('hidden');
            $(this).find('i').toggleClass('fa-bars fa-times');
        });
        
        // 回到顶部功能
        $('#back-to-top').click(function() {
            $('html, body').animate({ scrollTop: 0 }, 600);
        });
        
        // 页面加载时触发一次滚动检查
        $(window).trigger('scroll');
    </script>
</body>
</html>